<template>
  <div>
      <!-- 优秀新电台 -->
    <div class="excellent">
        <div class="header">
            <h3>优秀新电台</h3>
        </div>
        <ul class="excellent_content">
            <li v-for="(v,i) in excellentList" :key="i">
                <div class="excellent_content_a"><router-link to="#"><img :src="v.picUrl"></router-link></div>
                <div class="excellent_content_b"><router-link to="#">{{v.name}}</router-link></div>
                <div class="excellent_content_c">{{v.rcmdtext}}</div>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
    data () {
        return {
            excellentList:{},
        }
    },
  methods: {
    // 获取优秀新电台数据
    getexcellentListData() {
      axios
        .get(`http://127.0.0.1:3000/dj/recommend/type?type=${this.$route.params.id}`)
        .then((res) => {
            this.excellentList = res.data.djRadios
        });
    },
  },
  //
  created() {
    this.getexcellentListData();
  },
};
</script>
<style scoped>
.excellent .header {
    border-bottom: 2px solid #c20c0c;
    padding-bottom: 10px;
}
.excellent .header >h3{
    font-size: 24px;
    font-weight: 400;
}
/*  */
.excellent_content{
    display: flex;
    flex-wrap: wrap;
}
.excellent_content>li{
    width: 150px;
    margin-left: 37.5px;
    margin-top: 15px;
}
.excellent_content>li:nth-child(1){
    margin-left: 0px;
}
.excellent_content>li:nth-child(5n+1){
    margin-left: 0px;
}
.excellent_content>li>.excellent_content_a>a>img{
    width: 150px;
    height: 150px;
}
.excellent_content>li >.excellent_content_b>a{
    font-size: 14px;
}
.excellent_content>li >.excellent_content_b>a:hover{
    text-decoration: underline;
}
.excellent_content>li >.excellent_content_c{
    font-size: 12px;
    color: #999999;
    margin-top: 5px;
    overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>